<template>
  <view class="reviews-page">
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">&lt;</text>
      </view>
      <text class="page-title">我的评价</text>
    </view>
    
    <view class="reviews-container">
      <!-- 评价统计 -->
      <view class="stats-card">
        <view class="stats-info">
          <text class="stats-number">{{ reviews.length }}</text>
          <text class="stats-label">评价总数</text>
        </view>
        <view class="stats-tips">您的每一条评价都将帮助其他老人找到合适的养老院</view>
      </view>
      
      <!-- 无评价时显示 -->
      <view class="empty-container" v-if="reviews.length === 0">
        <view class="empty-image">
          <text class="empty-icon iconfont">&#xe63a;</text>
        </view>
        <text class="empty-text">您还没有发表任何评价</text>
        <view class="empty-btn" @tap="navigateToHome">
          <text>去浏览养老院</text>
        </view>
      </view>
      
      <!-- 评价列表 -->
      <view class="reviews-list" v-else>
        <view v-for="(item, index) in reviews" :key="index" class="review-item">
          <!-- 评价项目信息 -->
          <view class="item-header" @tap="viewDetail(item.nursingHomeId)">
            <view class="nursing-home-info">
              <text class="nursing-home-name">{{ item.nursingHomeName }}</text>
              <text class="review-time">{{ item.createTime }}</text>
            </view>
            <view class="rating">
              <text v-for="i in 5" :key="i" class="star" :class="{ 'active': i <= item.rating }">★</text>
              <text class="rating-text">{{ item.rating }}.0</text>
            </view>
          </view>
          
          <view class="review-content">
            <text class="content-text">{{ item.content }}</text>
            <view class="image-list" v-if="item.images && item.images.length > 0">
              <view v-for="(img, imgIndex) in item.images" :key="imgIndex" class="image-item">
                <view class="placeholder-image">
                  <text class="iconfont">&#xe614;</text>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 评价操作 -->
          <view class="item-actions">
            <view class="action-btn primary" @tap="viewDetail(item.nursingHomeId)">
              <text>查看养老院</text>
            </view>
            <view class="action-btn" @tap="editReview(index)">
              <text>编辑评价</text>
            </view>
            <view class="action-btn danger" @tap="deleteReview(index)">
              <text>删除评价</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 评价列表
const reviews = ref([]);

// 页面加载时执行
onMounted(() => {
  loadReviews();
});

// 加载评价数据
const loadReviews = () => {
  // 模拟API请求
  setTimeout(() => {
    // 模拟数据
    reviews.value = [
      {
        id: 201,
        nursingHomeId: 101,
        nursingHomeName: '康福养老院',
        rating: 5,
        content: '环境很好，工作人员态度亲切专业，餐饮健康可口，设施齐全，能够满足老年人的各种需求，是一个非常适合老人居住的地方。',
        images: ['img1', 'img2'],
        createTime: '2023-06-10'
      },
      {
        id: 202,
        nursingHomeId: 102,
        nursingHomeName: '颐养天年养老公寓',
        rating: 4,
        content: '整体来说是很好的，环境优美，服务周到，只是价格稍贵了一些，性价比还可以，适合经济条件较好的老人。',
        images: [],
        createTime: '2023-05-22'
      }
    ];
  }, 500);
};

// 查看养老院详情
const viewDetail = (id) => {
  uni.navigateTo({
    url: `/pages/nursing-home-detail/index?id=${id}`
  });
};

// 编辑评价
const editReview = (index) => {
  uni.showToast({
    title: '暂未开放编辑功能',
    icon: 'none'
  });
};

// 删除评价
const deleteReview = (index) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该评价吗？',
    success: (res) => {
      if (res.confirm) {
        // 这里应该调用API删除评价
        reviews.value.splice(index, 1);
        
        uni.showToast({
          title: '已删除评价',
          icon: 'success'
        });
      }
    }
  });
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};

// 导航到首页
const navigateToHome = () => {
  uni.switchTab({
    url: '/pages/index/index'
  });
};
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
  min-height: 100%;
}

.reviews-page {
  min-height: 100vh;
  padding-bottom: 50px; /* 为tabBar预留空间 */
  
  .header {
    position: relative;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid rgba(44, 120, 115, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    
    .back-btn {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      
      .back-icon {
        font-size: 20px;
        font-weight: bold;
        color: #2c7873;
      }
    }
    
    .page-title {
      font-size: 18px;
      font-weight: 600;
      color: #2c7873;
    }
  }
  
  .reviews-container {
    padding: 15px;
    
    // 统计卡片
    .stats-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      border-radius: 12px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(44, 120, 115, 0.1);
      background: linear-gradient(to right, #e7f3f2, #fff);
      
      .stats-info {
        display: flex;
        flex-direction: column;
        
        .stats-number {
          font-size: 24px;
          font-weight: bold;
          color: #2c7873;
          margin-bottom: 5px;
        }
        
        .stats-label {
          font-size: 14px;
          color: #5d4037;
        }
      }
      
      .stats-tips {
        font-size: 12px;
        color: #8d6e63;
        max-width: 60%;
      }
    }
    
    // 无评价时显示
    .empty-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px 0;
      
      .empty-image {
        width: 80px;
        height: 80px;
        border-radius: 40px;
        background-color: rgba(44, 120, 115, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        
        .empty-icon {
          font-size: 40px;
          color: #2c7873;
        }
      }
      
      .empty-text {
        font-size: 16px;
        color: #5d4037;
        margin-bottom: 20px;
      }
      
      .empty-btn {
        padding: 12px 25px;
        background: linear-gradient(135deg, #6FB3B8, #388E8E);
        border-radius: 25px;
        box-shadow: 0 4px 10px rgba(44, 120, 115, 0.2);
        
        text {
          color: #fff;
          font-size: 15px;
          font-weight: 500;
        }
      }
    }
    
    // 评价列表
    .reviews-list {
      .review-item {
        background-color: #fff;
        border-radius: 12px;
        padding: 15px;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        // 评价头部
        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 12px;
          
          .nursing-home-info {
            .nursing-home-name {
              font-size: 16px;
              font-weight: 600;
              color: #5d4037;
              margin-bottom: 4px;
              display: block;
            }
            
            .review-time {
              font-size: 12px;
              color: #bcaaa4;
            }
          }
          
          .rating {
            display: flex;
            align-items: center;
            
            .star {
              font-size: 16px;
              color: #d1d1d1;
              margin-right: 2px;
              
              &.active {
                color: #2c7873;
              }
            }
            
            .rating-text {
              font-size: 14px;
              color: #2c7873;
              margin-left: 4px;
              font-weight: 500;
            }
          }
        }
        
        // 评价内容
        .review-content {
          margin-bottom: 15px;
          
          .content-text {
            font-size: 14px;
            color: #5d4037;
            line-height: 1.5;
            margin-bottom: 10px;
            display: block;
          }
          
          .image-list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -5px;
            
            .image-item {
              width: calc(33.33% - 10px);
              height: 80px;
              margin: 5px;
              background-color: rgba(141, 110, 99, 0.05);
              border-radius: 6px;
              overflow: hidden;
              display: flex;
              justify-content: center;
              align-items: center;
              
              .placeholder-image {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                
                .iconfont {
                  font-size: 24px;
                  color: #bcaaa4;
                }
              }
            }
          }
        }
        
        // 评价操作
        .item-actions {
          display: flex;
          border-top: 1px solid rgba(141, 110, 99, 0.1);
          padding-top: 12px;
          
          .action-btn {
            padding: 8px 0;
            display: flex;
            justify-content: center;
            flex: 1;
            
            text {
              font-size: 14px;
              color: #8d6e63;
            }
            
            &.primary {
              text {
                color: #2c7873;
              }
            }
            
            &.danger {
              text {
                color: #f44336;
              }
            }
          }
        }
      }
    }
  }
}
</style> 